<template>
  <div class="ourStory">
     <p>预览Warranty Policy</p>
     <div> 
      <el-tabs type="card"  class="ourStoryTab">
        <el-tab-pane :label="item.site"  v-for="item  in list" :key="item.id">
          <div class="hasData" v-html="item.article_detail" @dblclick="closeAddDialog(item.site)" v-if="item.article_detail" ></div>
          <div v-else class="nodata" @click="closeAddDialog(item.site)">
              <i class="iconfont icon-add_2_normal"></i>
              <p>该站点暂无内容，点击可添加内容</p>
          </div>

        </el-tab-pane>
      </el-tabs>
     </div>

      <Add v-show="addShow" :show="addShow" :isAdd="isAdd" @closeDialog="closeAddDialog"></Add>

  </div>
</template>

<script>
import { list } from '@/api/aboutus/warrantyPolicy.js' 
import { Add } from './components'

export default {
  name: 'warranty_policy',
  data () {
    return {
      list: [],
      addShow: false,
      isAdd: '添加',
      curSite: ''
    }
  },
  created(){
    this.getList()
  },
  methods: {
    getList () {
      list().then(res=>{
        this.list = res.data
        for(let i = 0; i < this.list.length; i++ ){
          if(this.list[i].article_detail){
            this.isAdd = '编辑'
            break;
          }
        }
      })
    },
    closeAddDialog(site){
      if(site) {
        this.curSite = site
      }
      this.addShow = !this.addShow
      if(!this.addShow){
        this.getList()
      }
    },
  },
  components:{Add},


}
</script>

<style lang="scss">
@import '@/styles/aboutus/ourstory.scss';
</style>